Axios 封装(拦截器)

MuYan2021-01-22VueVue
  • Axios 封装(拦截器)、api 接口统一封装,提高代码复用性、可维护性。

  • 安装 axios、qs

npm install qs axios --save
  • 新建 config 配置文件
const dev = process.env.NODE_ENV
const isDev = dev === 'development'
const baseUrlList = {
	'development': '开发环境地址',
	'production': '生产环境地址'
}
const baseURL = baseUrlList[dev]
export {
	baseURL, // 请求地址前缀
	isDev, // 用于全局环境判断依据
	dev
}
  • 新建 request 文件,封装 axios 的请求,回调统一处理。
// api/request.js
import axios from 'axios'
import qs from 'qs';

import {
	baseURL
} from '@/config'

const instance = axios.create({
    // 更多配置信息,可从文章结尾处文档查询
    baseURL, // axios 请求地址前缀
	timeout: 50000 // 请求超时时间(毫秒)
})

// 请求拦截器
instance.interceptors.request.use((config) => {
    // 请求前的数据处理
    // 默认 request payload 传参,此处判断data传参方式
    if (config.type === "formData") {
		config.data = qs.stringify(config.data);
	}
    return config;
}, (error) => {
    // 处理请求错误
    return Promise.reject(error);
});

// 响应请求的拦截器
instance.interceptors.response.use((res) => {
    // 对回调数据进行处理
    if(res.status === 200){
        return Promise.resolve(res.data);
    } else {
        return Promise.reject(res);
    }
}, (error) => {
    // 处理请求回调错误
    return Promise.reject(error);
});

export default (url, data = {}, method = 'post', type = 'formData') => {
	let options = {
		url,
		method,
		data,
        header
	}
	if (type === 'formData') Object.assign(options, {
        type: 'formData'
    })

    // 用于upload
    if (type === 'form') {
        const form = new FormData()
        for (let i in data) {
            form.append(`${i}`, data[i])
        }
        options.data = form
    }

	return instance(options)
}
// api/user.js
import service from './request'
export const login = data => {
    return service('login', data)
}

注:axios git文档open in new window

上次更新 2026/6/23 11:49:15
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8